<template>
  <div v-loading="loading" class="dialog_info" element-loading-background="rgba(0, 0, 0, 0.4)">
    <div class="dialog_info_title">
      <!-- <div class="tab">
        <span
          v-for="(item, index) in tabTitList"
          :key="index"
          :class="{ activeTab: selectNum == index }"
          class="tabTit"
          @click="changeDig($event,index)"
        >
          {{ item }}
        </span>
      </div> -->
      <div v-show="selectNum == 0" class="floodYmfx">
        <!-- <div class="floodYmfxTop">
          <div>
            最大淹没深度：
            <span>{{ floodParams.maxH }}</span>
          </div>
          <div>
            最大淹没时刻：
            <span>{{ floodParams.mxtm| dateformat }}</span>
          </div>
          <div>
            淹没开始时间：
            <span>{{ floodParams.dtBegin | dateformat }}</span>
          </div>
          <div>
            淹没结束时间：
            <span>{{ floodParams.dtEnd| dateformat }}</span>
          </div>
        </div> -->
        <div class="rainInfo_top">
          <div style="margin-bottom:16px">
            <div>
              <div>
                  <span>网格编号：</span><span>{{ floodParams.guid || '&nbsp;' }}</span>
              </div>
            </div>
          <div>
              <div>
                  <span>最大淹没深度：</span><span>{{ floodParams.maxH || '&nbsp;' }}</span>
              </div>
            </div>
            <div>
              <div>
                  <span>最大淹没时刻：</span><span>{{ floodParams.mxtm | dateformat }}</span>
              </div>
            </div>
            <div>
              <div>
                  <span>淹没开始时间：</span> <span>{{ floodParams.dtBegin | dateformat  }}</span>
              </div>
            </div>
            <div>
              <div>
                  <span>淹没结束时间：</span><span > {{ floodParams.dtEnd| dateformat }} </span>
              </div>
            </div>
          </div>
        </div>
        <!-- 图表 -->
        <div class="floodEcharts">
          <!-- <p>{{ params.ewName }}淹没水深过程图</p> -->
          <p  class="subtitle">{{ params.ewName || '' }}淹没水深过程图</p>
          <Newecharts id="floodEcharts" :option="floodEcharts" style="width:100%;" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Newecharts from './newecharts.vue'
import {
    GetDrowningProcess
} from '@/api/xuna.js'
import moment from 'moment'
export default {
    components: {
        Newecharts
    },
    data() {
        return {
            selectNum: 0,
            tabTitList: ['淹没分析'],
            floodParams: {},
            floodEcharts: {},
            params: this.$store.getters.dlgParams.params,
            loading: false
        }
    },
    created() {
        this.getGetDrowningProcess()
        console.log('params',this.params);
        
    },
    methods: {
        getGetDrowningProcess() {
            this.loading = true
            GetDrowningProcess({ ID: this.params.ID, Guid: this.params.Guid }).then((res) => {
                if (res.isSuccess) {
                    this.loading = false
                    this.floodParams = res.data[0]
                    this.getfloodEcharts(res.data[0].process)
                }
            })
        },
        getfloodEcharts(dataEchart) {
            dataEchart = dataEchart.map((v) => {
                return [moment(v.tm).format('YYYY-MM-DD HH:mm'), Number(v.h).toFixed(2)]
            })
            this.floodEcharts = {
                tooltip: {
                    backgroundColor: 'rgba(50,50,50,0.7)',
                    borderColor: '#333',
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    },
                    textStyle: {
                        color: '#fff'
                    }
                },
                legend: {
                    show: false
                },
                grid: {
                    top: 40,
                    left:90,
                    right:50,
                    // x: 35,
                    // y: 35,
                    // x2: 25,
                    // y2: 55
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    axisLabel: {
                        textStyle: {
                            color: '#fff'
                        }
                    },
                },
                yAxis: {
                    type: 'value',
                    name: '淹没水深(m)',
                    axisLine: {
                        show: false
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#0E5185'
                        }
                    },
                    nameTextStyle: {
                        color: '#fff',
                        fontSize: 12
                    },
                    axisLabel: {
                        formatter: '{value}',
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    labels: {
                        align: 'left',
                        x: -8,
                        y: 5,
                        style: {
                            color: '#fff'
                        }
                    }
                },
                series: [
                    {
                        type: 'line',
                        smooth: 0.6,
                        symbol: 'none',
                        lineStyle: {
                            color: '#75B0FC',
                            width: 3
                        },
                        name: '淹没水深',
                        barWidth: 20,
                        tooltip: {
                            valueFormatter: function(value) {
                                return value + 'm'
                            }
                        },
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: '#75B0FC' // 0% 处的颜色
                                }, {
                                    offset: 1, color: '#3B587E' // 100% 处的颜色
                                }],
                                global: false // 缺省为 false
                            }
                        },
                        data: dataEchart
                    }
                ]
            }
        }
    }
}
</script>
<style scoped lang="less">
      .tab{
        border-bottom: 1px solid #335875;
        padding-bottom: 15px;
        height: auto;
        overflow: hidden;
    }
    .floodYmfx{
      width: 100%;
      height: 100%;
      overflow: hidden;
      .floodEcharts{
        height: 500px;
        p{
          //height: 40px;
          //line-height: 40px;
          //font-size: 16px;
          font-weight: 700;
          margin-left: 20px;
        }
        >div{
          height: 100%;
        }
      }
      .floodYmfxTop{
        width: 100%;
        overflow: hidden;
        height: 50px;
        line-height: 50px;
        margin-left: 20px;
        >div{
          width: 25%;
          float: left;
         // color: #8FC0FC;
           color: #fff;
          span{
            color: #fff;
          }
        }
      }
    }
.subtitle{
  height: 28px;
  line-height: 0px;
  margin: 20px 0 4px 0;
  text-indent: 4px;
  font-size: 15px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #FFFFFF;
  background: url(../../assets/dialog/dialogBT.png) no-repeat center;
  background-size: 100% 100%;
}
  .rainInfo_top {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin: 10px 20px 0 20px;
    &>:nth-child(1){
        width: 100%;
        box-sizing: border-box;
        display: flex;
        background: rgba(0,165,233,0.3);
        padding: 10px 0 ;
        font-size: 14px;
        >div{
            box-sizing: border-box;
            flex: 1;
            color: #fff;
            border-left: 1px solid #4285A6;
            padding-left:10px ;
            >div{
                background: url(../../assets/newimg/矩形.png) no-repeat left center;
                background-size: auto 66%;
                &>:nth-child(1){
                    color: #A5C2D8;
                    margin-bottom: 4px;
                }
                span {
                    color: #fff;
                    display: block;
                    text-indent: 14px;
                }
            }
        }
        &>:nth-child(1){
            border: none;
        }
    }
    >div:nth-child(2){
        width: 31%;
    }
    >div:nth-child(3){
        width: 40%;
        text-indent: 30px;
        text-align: left;
    }
}
</style>
